<template>
	<view class="nas-transfer">
		<view class="nas-transfer-top">
			<view class="nas-bar-item" @click="goBack"><image src="/static/nas-static/nas_back_s.svg" mode=""></image></view>
			<view class="nas-bar-item">传输列表</view>
			<view class="nas-bar-item capacity">
				<!-- 容量：
				<text style="color: #3069dc;">{{ capacityUsed }}</text>
				/{{ capacity }} -->
			</view>
		</view>
		<view class="nas-bar-items" v-if="!selectAmount">
			容量：
			<text style="color: #3069dc;">{{ capacityUsed }}</text>
			/{{ capacity }}
		</view>
		<view class="nas-transfer-top" v-if="selectAmount">
			<view class="nas-bar-item" @click="allCancel">取消</view>
			<view class="nas-bar-item">已选中{{ selectAmount }}个文件</view>
			<view class="nas-bar-item" @click="allSelect">全选</view>
		</view>
		<view class="nas-transfer-body">
			<!-- 头部tab -->
			<u-subsection
				:list="list"
				:animation="false"
				:current="current"
				active-color="#fff"
				@change="switchType"
				bg-color="#F5F5F5"
				button-color="#3069DC"
				font-size="28"
				bold
			></u-subsection>
			<!-- 上传列表 -->
			<NasUploadList v-show="current == 0" :type="type" @upDate="getCapacity" @showTopMore="showTopMore" ref="upload"></NasUploadList>
			<!-- 上传完成列表 -->
			<!-- <NasUploadedList v-if="current == 1" @showTopMore="showTopMore" ref="uploaded"></NasUploadedList> -->
			<!-- 下载列表 -->
			<NasDownloadList v-if="current == 1" :type="type" ref="download" @showTopMore="showTopMore"></NasDownloadList>
			<!-- 下载完成列表 -->
			<!-- <NasDownloadedList v-if="current == 2" @showTopMore="showTopMore" ref="downloaded"></NasDownloadedList> -->
			<!-- 转存列表 -->
			<NasArchivedList v-if="current == 2" @showTopMore="showTopMore" ref="archived"></NasArchivedList>
		</view>
	</view>
</template>

<script>
import NasUploadList from '../components/nas-uploadList/nas-uploadList.vue';
// import NasUploadedList from '../components/nas-uploadedList/nas-uploadedList.vue';
import NasDownloadList from '../components/nas-downloadList/nas-downloadList.vue';
// import NasDownloadedList from '../components/nas-downloadedList/nas-downloadedList.vue';
import NasArchivedList from '../components/nas-archivedList/nas-archivedList.vue';
import request from '../utils/request.js';
export default {
	name: 'nasTransfer',
	components: {
		NasUploadList,
		// NasUploadedList,
		NasDownloadList,
		// NasDownloadedList
		NasArchivedList
	},
	data() {
		return {
			list: [
				{
					name: '上传列表'
				},
				// {
				// 	name: '上传完成'
				// },
				{
					name: '下载列表'
				},
				{
					name: '转存列表'
				}
			],
			current: 0, // 当前的tab
			type: 'upload', // 列表的类型
			isBackHome: '0', // 默认返回上一页
			selectAmount: 0,
			capacityUsed: '', // 已使用容量
			capacity: '' // 总容量
		};
	},
	onLoad(e) {
		this.isBackHome = e.isBackHome || '0';
		// 获取容量信息
		this.getCapacity();
	},
	onBackPress(options) {
		// if (options.from === 'navigateBack') {
		// 	return false;
		// }
		// this.back();
		// return true;
	},
	methods: {
		async getCapacity() {
			console.log('查询容量');
			const params = {
				method: 'POST',
				url: '/nas/volume/info',
				data: {}
			};
			const { data } = await request(params);
			this.capacityUsed = this.diskSize(data.capacityUsed);
			this.capacity = this.diskSize(data.capacity);
			// console.log(res);
		},
		switchType(e) {
			if (this.current == e) return;
			this.selectAmount = 0;
			this.current = e;
			if (e == 0) {
				this.type = 'upload';
			} else {
				this.type = 'download';
			}
		},
		goBack() {
			if (this.isBackHome == '1') {
				// uni.$emit('refreshData');
				uni.navigateBack({
					delta: 2
				});
			} else {
				// uni.$emit('refreshData');
				uni.navigateBack({
					delta: 1
				});
			}
		},
		showTopMore(item) {
			this.selectAmount = item;
		},
		// 取消选择
		allCancel() {
			if (this.current == 0) {
				this.$refs.upload.allCancel();
			} else if (this.current == 1) {
				this.$refs.download.allCancel();
			} else {
				this.$refs.archived.allCancel();
			}
			this.selectAmount = 0;
		},
		// 全选
		allSelect() {
			if (this.current == 0) {
				this.$refs.upload.allSelect();
			} else if (this.current == 1) {
				this.$refs.download.allSelect();
			} else {
				this.$refs.archived.allSelect();
			}
		},
		//计算文件的大小
		diskSize: num => {
			if (!num) return '0B';
			let k = 1024; //设定基础容量大小
			let sizeStr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //容量单位
			let i = 0; //单位下标和次幂
			for (let l = 0; l < 8; l++) {
				//因为只有8个单位所以循环八次
				if (num / Math.pow(k, l) < 1) {
					//判断传入数值 除以 基础大小的次幂 是否小于1，这里小于1 就代表已经当前下标的单位已经不合适了所以跳出循环
					break; //小于1跳出循环
				}
				i = l; //不小于1的话这个单位就合适或者还要大于这个单位 接着循环
			}
			//例： 900 / Math.pow(1024, 0)  1024的0 次幂 是1 所以只要输入的不小于1 这个最小单位就成立了；
			//   900 / Math.pow(1024, 1)  1024的1次幂 是1024  900/1024 < 1 所以跳出循环 下边的 i = l；就不会执行  所以 i = 0； sizeStr[0] = 'B';
			//   以此类推 直到循环结束 或 条件成立
			return (num / Math.pow(k, i)).toFixed(2) + sizeStr[i]; //循环结束 或 条件成立 返回字符
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'uview-ui/index.scss';
.nas-transfer {
	background: #fff;
	height: 100%;
	.nas-transfer-top {
		position: absolute;
		top: 98rpx;
		left: 0;
		right: 0;
		background: #ffffff;
		height: 48rpx;
		width: 100%;
		display: flex;
		align-items: center;
		.nas-bar-item {
			flex: 1;
			&:nth-of-type(1) {
				display: flex;
				align-items: center;
				margin-left: 32rpx;
				color: #3069dc;
				image {
					width: 50rpx;
					height: 34rpx;
				}
			}
			&:nth-of-type(2) {
				text-align: center;
				ont-family: HarmonyOS_Sans_SC_Medium;
				font-size: 30rpx;
				color: rgba(51, 51, 51, 0.9);
				font-weight: 500;
			}
			&:last-of-type {
				text-align: right;
				margin-right: 32rpx;
				font-family: HarmonyOS_Sans_SC;
				font-size: 28rpx;
				color: #3069dc;
				font-weight: 400;
				flex-wrap: nowrap;
			}
		}
		.capacity {
			color: rgba(51, 51, 51, 0.9) !important;
			font-size: 20rpx !important;
		}
	}
	.nas-transfer-body {
		position: absolute;
		top: 170rpx;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: scroll;
	}
	/deep/ .u-subsection {
		height: 96rpx !important;
		border-radius: 48rpx !important;
		margin: 0rpx 32rpx;
	}
	/deep/ .u-item-bg {
		height: 72rpx !important;
		border-radius: 36rpx !important;
		bottom: 12rpx !important;
	}
}
.nas-bar-items {
	// border: 1rpx solid red;
	background-color: #fff;
	padding-top: 8rpx;
	z-index: 1;
	height: 80rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0rpx;
	font-family: HarmonyOS_Sans_SC;
	font-size: 28rpx;
	color: #333;
	font-weight: 400;
	display: flex;
	justify-content: center;
	// align-items: center;
	// left: 50%;
	// transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
